<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="js/vue.min.js"></script>
<style type="text/css">
.red{color:red;}
.orange{color:orange;}
.yellow{color:yellow;}
</style>
</head>
<body>
<div id="myApp">
	<h3>全局组件</h3>
	<love></love>
<hr>
	<h3>局部组件</h3> 
	<compartone></compartone>
<hr>
	<h3>prop传递参数</h3>
	<comparttwo message="hello world!"></comparttwo>
<hr>
	<h3>动态prop</h3>
	<input type="text" v-model="parentMsg">
	<compartthr v-bind:message="parentMsg"></compartthr>
<hr>
	<h3>组件结合for循环</h3>
	<compartfour v-for="x in color" v-bind:todo="x"></compartfour>
</div>
<script type="text/javascript">
// 这样注册的组件就是全局组件
Vue.component('love',{
	template:"<h3>I Love You！</h3>"
});
var child = {template:'<h3>compart</h3>'};
// 利用 props 传值 
var password = {template:'<h3>props</h3>'};
var myApp = new Vue({
	el:"#myApp",
	// 这里注册的组件就是局部组件 只在父模板调用
	components:{
		'compartone':child,
		'comparttwo':{
			props:['message'],
			template:"<h3>{{message}}</h3>"
		},
		'compartthr':{
			props:['message'],
			template:"<p>{{message}}</p>"
		},
		'compartfour':{
			props:['todo'],
			template:"<li>{{todo}}</li>"
		}
	},
	data:{ 
		message:'hello world!',
		parentMsg:"Hello",
		color:['red','orange','yellow','green','blue']
	}
});
</script>
</body>
</html>